import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';

const Lane = ({ position = [0, 0, 0], color = "white", active = false, width = 1.5 }) => {
  const meshRef = useRef();
  const materialRef = useRef();
  
  // 轨道发光效果
  useFrame((state, delta) => {
    if (materialRef.current) {
      if (active) {
        // 激活状态，增加发光强度
        materialRef.current.emissiveIntensity = THREE.MathUtils.lerp(
          materialRef.current.emissiveIntensity,
          2.0,
          delta * 10
        );
      } else {
        // 非激活状态，降低发光强度
        materialRef.current.emissiveIntensity = THREE.MathUtils.lerp(
          materialRef.current.emissiveIntensity,
          0.2,
          delta * 5
        );
      }
    }
  });
  
  return (
    <group position={position}>
      {/* 轨道基础部分 */}
      <mesh 
        ref={meshRef}
        position={[0, 0, -25]}
        rotation={[-Math.PI / 2, 0, 0]}
        receiveShadow
      >
        <planeGeometry args={[width, 50]} />
        <meshStandardMaterial 
          ref={materialRef}
          color={color}
          emissive={color}
          emissiveIntensity={active ? 2.0 : 0.2}
          metalness={0.8}
          roughness={0.2}
          transparent
          opacity={0.7}
        />
      </mesh>
      
      {/* 轨道起点 */}
      <mesh position={[0, 0.1, 0]} castShadow receiveShadow>
        <boxGeometry args={[width, 0.2, 2]} />
        <meshStandardMaterial 
          color={color}
          emissive={color}
          emissiveIntensity={active ? 2.0 : 0.5}
          metalness={0.9}
          roughness={0.1}
        />
      </mesh>
      
      {/* 轨道终点（在远处） */}
      <mesh position={[0, 0.1, -50]} castShadow receiveShadow>
        <boxGeometry args={[width, 0.2, 2]} />
        <meshStandardMaterial 
          color={color}
          emissive={color}
          emissiveIntensity={0.5}
          metalness={0.9}
          roughness={0.1}
        />
      </mesh>
      
      {/* 两侧的光线 */}
      {active && (
        <>
          <pointLight 
            position={[width / 2, 1, 0]} 
            color={color} 
            intensity={5} 
            distance={5}
          />
          <pointLight 
            position={[-width / 2, 1, 0]} 
            color={color} 
            intensity={5} 
            distance={5}
          />
        </>
      )}
    </group>
  );
};

export default Lane; 